<template>
  <el-row :gutter="10">
    <el-col :span="4" class="left"><div class="title"><span>丨</span>地块列表</div><hr>
      <ul class="areaul">
        <li v-for="(item,index) in chartData.area" :key="index" class="li" @click="change(index)">{{ item }}</li>
      </ul>
    </el-col>
    <el-col :span="19" class="right">

      <div class="header"><span>丨</span>趋势分析
        <span class="but">
          <el-button class="elbut" @click="timeChange('day',0)">当天</el-button>
          <el-button class="elbut" @click="timeChange('week',1)">当周</el-button>
          <el-button class="elbut" @click="timeChange('month',2)">当月</el-button>
        </span>
      </div>
      <hr>
      <div class="main">
        <div class="chart"><water-chart :title="chartData.title[0]"  :id="0"></water-chart></div>
        <div class="chart"><water-chart :title="chartData.title[1]"  :id="1"></water-chart></div>
        <div class="chart"><water-chart :title="chartData.title[2]"  :id="2"></water-chart></div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {reactive} from 'vue'
import { useWaterData } from '@/store/Water/Water';
const chartData = useWaterData()
import WaterChart from './WaterChart.vue';
import { onMounted } from 'vue';
onMounted(()=>{
    const ul=document.querySelectorAll('.areaul .li')
    ul[0].classList.add('active')
    const elbut = document.querySelectorAll('.elbut')
    elbut[0].classList.add('butactive')
  })
function change(index){
    const ul=document.querySelectorAll('.areaul .li')
    for(let i = 0;i<ul.length;i++){
      ul[i].classList.remove('active')      
    }    
    ul[index].classList.add('active')
    chartData.chooseArea=ul[index].innerText
  }

  function timeChange(time,index){
    const elbut = document.querySelectorAll('.elbut')
    for(let i = 0;i<elbut.length;i++){
      elbut[i].classList.remove('butactive')
    }
    elbut[index].classList.add('butactive')
    chartData.time = time
  }
  

</script>

<style scoped>
@import url("./Water.css");
</style>